import React, {Component, CSSProperties} from 'react';

interface IMdShow {
  id: string
  value: string;
  style?: CSSProperties
}

class MdDocShow extends Component<IMdShow, any> {

  componentDidMount() {
    // @ts-ignore
    let editor = editormd.markdownToHTML(this.props.id, {
      markdown: this.props.value,
      //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
      htmlDecode: "style,script,iframe",  // you can filter tags decode
      //toc             : false,
      tocm: true,    // Using [TOCM]
      //tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
      //gfm             : false,
      //tocDropdown     : true,
      // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
      emoji: true,
      taskList: true,
      tex: true,  // 默认不解析
      flowChart: false,  // 默认不解析
      sequenceDiagram: false,  // 默认不解析
    });
  }

  componentWillReceiveProps(nextProps: Readonly<IMdShow>, nextContext: any) {
    if (nextProps.value !== this.props.value) {
      // @ts-ignore
      let edit = editormd.markdownToHTML(this.props.id, {
        markdown: nextProps.value,
        //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
        htmlDecode: "style,script,iframe",  // you can filter tags decode
        //toc             : false,
        tocm: true,    // Using [TOCM]
        //tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
        //gfm             : false,
        //tocDropdown     : true,
        // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
        emoji: false,
        taskList: true,
        tex: true,  // 默认不解析
        flowChart: false,  // 默认不解析
        sequenceDiagram: false,  // 默认不解析
      });
    }


  }

  render() {
    return (
      <div style={this.props.style}>
        <div id={this.props.id} style={{background: "#ffffff00",fontSize:"16px"}}>
          <textarea defaultValue={null} onChange={null} style={{display: "none"}}/>
        </div>
      </div>
    );
  }
}

export default MdDocShow;
